<!DOCTYPE html>
<html lang="en">
  <head>
    <title>video</title>
    <!-- Video.js -->
    <link
      href="https://unpkg.com/video.js/dist/video-js.css"
      rel="stylesheet"
    />
    <!-- <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
    <script src="https://unpkg.com/flv.js/dist/flv.min.js"></script>
    <script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script> -->
    <script src="video.min.js"></script>
    <script src="flv.min.js"></script>
    <script src="videojs-flvjs.min.js"></script>
    <script>
      // create the global ue4(...) helper function
      "object" != typeof ue || "object" != typeof ue.interface
        ? ("object" != typeof ue && (ue = {}),
          (ue.interface = {}),
          (ue.interface.broadcast = function (e, t) {
            if ("string" == typeof e) {
              var o = [e, ""];
              void 0 !== t && (o[1] = t);
              var n = encodeURIComponent(JSON.stringify(o));
              "object" == typeof history &&
              "function" == typeof history.pushState
                ? (history.pushState({}, "", "#" + n),
                  history.pushState({}, "", "#" + encodeURIComponent("[]")))
                : ((document.location.hash = n),
                  (document.location.hash = encodeURIComponent("[]")));
            }
          }))
        : (function (e) {
            (ue.interface = {}),
              (ue.interface.broadcast = function (t, o) {
                "string" == typeof t &&
                  (void 0 !== o
                    ? e.broadcast(t, JSON.stringify(o))
                    : e.broadcast(t, ""));
              });
          })(ue.interface),
        (ue4 = ue.interface.broadcast);
    </script>
    <style></style>
  </head>

  <body>
    <div style="background: black; min-width: 100vw; height: 100vh">
      <video
        id="videojs-flvjs-player"
        autoplay
        muted
        class="video-js vjs-default-skin vjs-big-play-centered w-full h-auto"
        style="width: 100%; height: 100%"
      ></video>
    </div>
  </body>
</html>
<script>
  var player;
  ue.interface.setUrl = function (val) {
    refreshPalyer(val);
  };
  window.onload = function () {
    ue4("init");
    refreshPalyer("test.mp4");
  };
  //var flvUrl = "";

  function init(flvUrl) {
    player = videojs(
      "videojs-flvjs-player",
      {
        techOrder: ["html5", "flvjs"],
        flvjs: {
          mediaDataSource: {
            isLive: false,
            cors: true,
            withCredentials: false,
          },
        },
        sources: [
          {
            src: flvUrl,
            type: "video/mp4",
          },
        ],
        controls: true,
        preload: "none",
      },
      function onPlayerReady() {
        console.log("player ready");

        player.on("error", (err) => {
          console.log("first source load fail");
          player.play();
          player.src({
            src: flvUrl,
            type: "video/x-flv",
          });

          player.ready(function () {
            console.log("player ready");
            player.load();
            player.play();
          });
        });
      }
    );
  }

  function refreshPalyer(url) {
    if (player) {
      player.src({
        src: url,
        type: "video/x-flv",
      });
      player.ready(function () {
        player.load();
        player.play();
      });
    } else {
      console.log("player 未定义 自动初始化");
      init(url);
    }
  }
</script>
